<template>
  <el-card class="box-card">
    <el-container>
        <el-aside width="250px" style="margin: 5px 10px 0px 10px;">
            <el-input size="small" v-model="filterText" prefix-icon="el-icon-search" placeholder="请输入分类名称" >
            </el-input>
            <el-tree style="margin-top:20px;" :data="treeDataTab" :props="defaultProps" ref="tree" @node-click="handleNodeClick" 
                :filter-node-method="filterNode" :expand-on-click-node="false" default-expand-all>
            </el-tree>
        </el-aside>
        <el-main style="margin:0px;padding:0px;padding-left:15px;background:white;">
            <div style="height: 100%;background: white;">
                <div class="box-row-1">
                    <el-form :inline="true" :model="ruleForm" ref="dataForm1">
                        <el-form-item label="物料编码" prop="materialsCode" class="itemClass">
                            <el-input size="small" v-model="ruleForm.materialsCode" placeholder="请输入物料编码"></el-input>
                        </el-form-item>

                        <el-form-item label="物料名称" prop="materialsName" class="itemClass">
                            <el-input size="small" v-model="ruleForm.materialsName" placeholder="请输入物料名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button size="small" type="primary" icon="el-icon-search" @click="submitForm('dataForm1')">搜索</el-button>
                            <el-button size="small" @click="resetForm('dataForm1')" icon="el-icon-refresh">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="box-row-2">
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <el-button size="small" type="primary" icon="el-icon-plus" @click="add" plain>新增</el-button>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple-light" style="text-align:right;">
                                <el-button  icon="el-icon-refresh" size="small" @click="Refresh" circle></el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="box-row-3">
                    <el-table :data="tableData" style="width: 100%;height:100%" ref="dataTable" v-loading="isloading" 
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column v-if="show" prop="iteM_ID" label="#" width="120" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="iteM_CODE" label="物理编码" width="150" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="iteM_NAME" label="物料名称" width="160" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="specification" label="规格型号" width="150" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column v-if="show" prop="measurE_ID" label="单位ID" width="100" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="measurE_NAME" label="单位" width="100" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column v-if="show" prop="iteM_TYPE_ID" label="物料/产品ID" width="100" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="iteM_OR_PRODUCT" label="物料/产品" width="120" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column v-if="show" prop="iteM_TYPE_ID" label="所属分类ID" width="130" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="iteM_TYPE_NAME" label="所属分类" width="130" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="enablE_FLAG" label="是否启用" width="80" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.enablE_FLAG == 0 ? 'primary' : 'danger'" disable-transitions>
                                    <div v-if="scope.row.enablE_FLAG == 0">启用</div>
                                    <div v-else>禁用</div>
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="safE_STOCK_FLAG" label="设置安全库存" width="110" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.safE_STOCK_FLAG == 1 ? 'primary' : 'danger'" disable-transitions>
                                    <div v-if="scope.row.safE_STOCK_FLAG == 1">启用</div>
                                    <div v-else>禁用</div>
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="creatE_TIME" label="创建时间" width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column fixed="right" label="操作" align="center" width="140">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
                            <el-button @click="handleDel(scope.row)" type="text" size="small" icon="el-icon-delete">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <div class="box-row-3-pagination">
                        <Pagination :pageindex="PageIndex" :pagesize="PageSize" :total="total"  @CurrentChange="CurrentChange" @SizeChange="SizeChange" />
                    </div>
                </div>
            </div>
        
            <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="false">
                <MaterialProductsManageInput :model="model" :options="treeDataTab" :isUpdate="isUpdate" @CloseDialog="closeDialog"/>
            </el-dialog>

        </el-main>
    </el-container>
  </el-card>
</template>

<script>
//分页组件
import Pagination from '../../components/Pagination.vue'
//新增/修改弹框组件
import MaterialProductsManageInput from './MasterDataComponents/MaterialProductsManageInput.vue'

export default {
    components:{
        Pagination,
        MaterialProductsManageInput
    },
    data(){
        return{
            tableData:[],
            treeDataTab:[],//tree数据
            PageIndex:1,//当前页数
            PageSize:10,//每页显示条数
            total:0,//总条数
            show:false,//是否显示某列
            isloading:false,//是否打开加载框
            groupName:'',//分类名称
            filterText:'',//搜索名称
            defaultProps:{
                //tree 绑定lable、children
                label:'iteM_TYPE_NAME',
                children:'children'
            },
            ruleForm:{
                materialsCode:'',
                materialsName:'',
            },
        }
    },
    methods:{
        //获取物料分类tree数据
        treeDataBind(){
            this.$http.request({
                type:'get',
                url:'/api/MaterialProductsManage/GetTree'
            }).then(res=>{
                if(res.data.code==200){
                    this.treeDataTab = res.data.data;
                }
            }).catch(err=>{
                this.ShowMsg('服务器繁忙，请稍后重试','系统提示');
            }).finally(()=>{
                
            })
        },
        //tree模糊搜索事件
        filterNode(value,data){
            if (!value) return true;
            return data.iteM_TYPE_NAME.indexOf(value) !== -1;
        },
        //tree点击事件
        handleNodeClick(data,node){
            if(node.level == 1){
                this.groupName = '';
            }else{
                this.groupName = data.iteM_TYPE_NAME;
            }
            this.dataBind();
        },
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    this.dataBind();
                }else{
                    this.show('服务繁忙, 请稍后重试!');
                }
            })
        },
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
        dataBind(){
            this.isloading = true;
            this.$http.request({
                type:'get',
                url:'/api/MaterialProductsManage',
                params:{
                    PageIndex:this.PageIndex,
                    PageSize:this.PageSize,
                    mdName:this.ruleForm.materialsName,
                    mdCode:this.ruleForm.materialsCode,
                    groupName:this.groupName,
                }
            }).then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                    this.tableData = res.data.data;
                    this.total = res.data.count;
                }
            }).catch(err=>{
                this.ShowMsg('服务器繁忙，请稍后重试','error');
            }).finally(()=>{
                this.isloading=false;
            })
        },
        SizeChange(e){
            this.PageSize = e;

            //从第一页开始
            this.PageIndex = 1;
            this.dataBind();
        },
        CurrentChange(e){
            this.PageIndex = e;
            this.dataBind();
        },
        add(){
            
        },
        Refresh(){
            this.dataBind();
        },
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    created(){
        this.treeDataBind();
        this.dataBind();
    }
}
</script>

<style scoped>
.box-card{
    height: 99%;
}
.itemClass{
    margin-right: 15px;
}
</style>